<template>
	<div>
		<!-- 单个商品 -->
		<template v-if="list.length === 1">
			<div v-for="(good, goodIndex1) in list" :key="`enableGroupCart +  ${goodIndex1}`">
			    <div class="pro-mes clearfix">
			        <div class="pro-img" style="position: relative">
			            <legend-image :pic="good.pic" :options="{ w: '160', h: '160' }" :isJD="good.prodSource == 'JD'" />
			            <span class="type-tip" v-if="good.stocks == -1">商品地区限售</span>
			            <img src="@/assets/images/haitao-small.png" class="haitao" v-if="good.goodsType == 'overseas'" />
			        </div>
			        <div class="pro-name">
			            <a href="javascript:;" class="name">
			                <em v-if="good.joinDiscount" style="font-size: 10px" :style="{ color: themes.color }">【限时折扣】</em>
			                {{ good.prodName }}
			            </a>
			            <div class="sku">{{ good.cnProperties }}</div>
			
			            <span class="price" :style="{ color: themes.color }" v-if="good.joinDiscount">
			                &#65509;
			                <em class="now" :style="{ color: themes.color }" style="font-size: 20px">{{ Money(good.discountPrice)[0] }}</em>
			                .{{ Money(good.discountPrice)[1] }}
			                <span style="text-decoration: line-through; color: #999; margin-left: 2px">
			                    ￥
			                    <em class="now" style="color: #999; font-size: 12px">{{ Money(good.price)[0] }}</em>
			                    .{{ Money(good.price)[1] }}
			                </span>
			            </span>
			
			            <span class="price" :style="{ color: themes.color }" v-else>
			                &#65509;
			                <em class="now" :style="{ color: themes.color }">{{ Money(good.price)[0] }}</em>
			                .{{ Money(good.price)[1] }}
			            </span>
			        </div>
			        <div class="pro-num">×{{ good.basketCount }}</div>
			    </div>
			</div>
		</template>
		<!-- 多个商品 -->
		<template v-else>
			<div class="pro-mes imgs overflow-h">
				<div class="pro-img" v-for="(good, goodIndex) in list" :key="'imgsCart' + goodIndex">
					<legend-image :pic="good.pic" :options="{ w: '160', h: '160' }" :isJD="good.prodSource == 'JD'" />
					<div v-if="good.basketCount > 1" class="flex-center position-absolute left-0 bottom-0 bg-black-5 w-80p h-20p font-12 text-fff">
						<span class="line-clamp1 text-center">{{good.basketCount}}件</span>
					</div>
				</div>
				<div class="flex-center position-absolute top-1 right-0 w-60p h-80p bg-white-95" @click="openGoodsPopup">
					<div class="line-clamp1 text-center">
						<span class="font-12">共{{num}}件</span>
						<span class="iconfont iconArrowRight" style="font-size: 12px"></span>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import legendImage from 'components/legendImage/legendImage'
	import { mapState } from 'vuex'
	import cash from 'utils/tool'
	export default {
		props: {
			list: { //列表
				type: Array,
				default: []
			},
			num: { //数量
				type: [Number,String],
				default: 0
			},
			type: { //类型  enableGroup:未参加营销且上线的商品; 活动商品项promotion
				type: String,
				default: 'enableGroup'
			},
			groupIndex: { //index group 的 index
				type: Number,
				default: 0
			},
			promotionIndex: { //index  只有type为promotion时才会用到
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				Money: cash, //价格转换
			}
		},
		components: {
			legendImage
		},
		computed: {
		   ...mapState(['themes'])
		},
		methods: {
			openGoodsPopup() {
				let obj = {
					type: this.type,
					groupIndex: this.groupIndex
				}
				if(this.type === 'promotion') {
					obj.promotionIndex = this.promotionIndex
				}
				this.$emit('openGoodsPopup',obj)
			}
		}
	}
</script>
<style scoped>
	.submit-con {
		margin-top: 0;
	}
</style>

